<template>
	<view>
		<my-search @click="gotoSearch"></my-search>
		<view class="scroll-view-container">
			<!-- 左侧滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
				<block v-for="(item,i) in cateList" :key="i">
					<!-- 每个元素都是一个视图块，类名为 'left-scroll-view-item'，如果 i 等于 active 则追加 'active' 类名 -->
					<view :class="['left-scroll-view-item',i===active ? 'active':'']" @click="changeActive(i)">
						{{item.cat_name}}
					</view>
				</block>
			</scroll-view>

			<!-- 右侧滚动视图区域 -->
			<!-- :scroll-top="scrollTop" 动态控制滚动位置 -->
			<scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
				<!-- 渲染二级分类 -->
				<view class="cate-list2" v-for="(item2,i2) in cateList2" :key="i2">
					<view class="cate-list2-item">/{{item2.cat_name}}/</view>
					<!-- 三级分类 -->
					<view class="cate-list3">
						<view class="cate-list3-item" v-for="(item3,i3) in cateList3" :key="i3" @click="gotoGoodsList(item3)">
							<image :src="item3.cat_icon"></image>
							<text>{{item3.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//定义窗口可用高度
				wh: 0,
				cateList: [],
				cateList2:[],
				cateList3:[],
				//当前选中的索引项
				active: 0,
				//滚动条距离顶部的距离
				scrollTop:0,
			};
		},
		onLoad() {
			//获取当前手机系统信息
			const sysInfo = uni.getSystemInfoSync()
			//可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
			this.wh = sysInfo.windowHeight - 50  //添加自定义搜索组件，可用高度需要减去搜索组件的高度
			this.getCateList()
		},
		methods: {
			async getCateList() {
				const {
					data: res
				} = await uni.$http.get('api/public/v1/categories')
				if (res.meta.status !== 200) return uni.$showMsg()
				this.cateList = res.message
				this.cateList2 = res.message[0].children
				this.cateList3 = res.message[0].children[0].children
			},
			changeActive(i) {
				this.active = i
				this.cateList2 = this.cateList[i].children
				this.cateList3 = this.cateList[i].children[i].children
				this.scrollTop = this.scrollTop === 0 ? 1:0
			},
			gotoGoodsList(item3){
				console.log(item3.cat_name)
				uni.navigateTo({
					url:'/subPackages/goods_list/goods_list?cid='+item3.cat_id+'&query='+ item3.cat_name
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/subPackages/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
    /* 容器样式，使用 flex 布局 */
    .scroll-view-container {
        display: flex;

        /* 左侧滚动视图样式 */
        .left-scroll-view {
            width: 120px;

            /* 左侧滚动视图中的每个条目样式 */
            .left-scroll-view-item {
                line-height: 60px; /* 每个条目的行高 */
                background-color: #f7f7f7; /* 条目的背景颜色 */
                text-align: center; /* 文本居中 */
                font-size: 12px; /* 字体大小 */

                /* 激活状态下的样式 */
                &.active {
                    background-color: #ffffff; /* 激活状态的背景颜色 */
                    position: relative;

                    /* 激活状态下的特殊标记样式 */
                    &::before {
                        content: ' '; /* 伪元素内容为空白 */
                        display: block;
                        width: 3px; /* 特殊标记的宽度 */
                        height: 30px; /* 特殊标记的高度 */
                        background-color: #c00000; /* 特殊标记的背景颜色 */
                        position: absolute;
                        left: 0%; /* 特殊标记的左侧位置 */
                        top: 25%; /* 特殊标记的顶部位置 */
                    }
                }
            }
        }

        /* 右侧滚动视图样式 */
        .right-scroll-view {
            /* 第二级条目样式 */
            .cate-list2-item {
                font-size: 15px; /* 字体大小 */
                font-weight: bold; /* 字体加粗 */
                text-align: center; /* 文本居中 */
                padding: 15px 0; /* 上下内边距 */
            }

            /* 第三级条目样式 */
            .cate-list3 {
                display: flex;
                flex-wrap: wrap;

                /* 每个第三级条目的样式 */
                .cate-list3-item {
                    display: flex;
                    flex-direction: column;
                    width: 33.33%; /* 宽度占父容器的三分之一 */
                    margin-bottom: 10px; /* 底部外边距 */
                    align-items: center;

                    /* 图片样式 */
                    image {
                        width: 60px; /* 图片宽度 */
                        height: 60px; /* 图片高度 */
                    }

                    /* 文本样式 */
                    text {
                        font-size: 12px; /* 字体大小 */
                    }
                }
            }
        }
    }
</style>



